<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }

    #my-swiper{
        width: 400px;
        height: 550px;
        margin: 0 auto;
        position: relative;
    }

    #box{
        width: 100%;
        height: 100%;
    }

    img{
        width: 100%;
        height: 100%;
    }

    #box .item{
        display: none;
    }

    #box .item.active{
        display: block;
    }

    #swiper-pagination{
        position: absolute;
        bottom: 20px;
        width: 100%;
        text-align: center;
    }

    #swiper-pagination .item{
        width: 15px;
        height: 15px;
        background-color: #fff;
        display: inline-block;
        margin-right: 5px;
    }

    #swiper-pagination .item:last-child{
        margin-right: 0;
    }

    #swiper-pagination .item.active{
        background-color: aqua;
    }
</style>
<body>
    <div id="my-swiper">
        <div id="box">
            <div class="item active">
                <img src="/images/1.jpg" alt="">
            </div>
            <div class="item">
                <img src="/images/2.jpg" alt="">
            </div>
            <div class="item">
                <img src="/images/3.jpg" alt="">
            </div>
            <div class="item">
                <img src="/images/4.jpg" alt="">
            </div>
        </div>

        <!-- 如果需要分页器 -->
        <div id="swiper-pagination"></div>
    </div>
</body>
</html>
<script>
    let MySwiper = document.getElementById('my-swiper');

    let box = document.getElementById('box');

    let SwiperItem = box.getElementsByClassName('item');

    let SwiperPagination = document.getElementById('swiper-pagination');

    let PaginationItem = SwiperPagination.getElementsByClassName('item');

    // 定义当前显示图片
    let index = 0;

    // 存放定时器变量
    let T = null;

    // console.log(PaginationItem)

    // 点击分页切换图片
    // 事件委托 利用事件冒泡原理，把一个元素事件放到另一个元素上触发
    // for(let i = 0;i < PaginationItem.length;i++)
    // {
    //     PaginationItem[i].onclick = function()
    //     {
    //         console.log(this);
    //     }
    // }
    SwiperPagination.onclick = function(e)
    {
        let target = e.target;

        // data-index的值等价于false，后面代码不会执行
        if(!target.dataset.index)
        {
            return false;
        }

        index = target.dataset.index;

        for(let i = 0;i < SwiperItem.length;i++)
        {
            SwiperItem[i].classList.remove('active');
            PaginationItem[i].classList.remove('active');
        }

        SwiperItem[index].classList.add('active');
        PaginationItem[index].classList.add('active');
    }

    MySwiper.onmouseover = function()
    {
        // 清除循环定时器
        clearInterval(T);
    }

    MySwiper.onmouseout = function()
    {
        T = setInterval(AutoPlay,1000);
    }

    // 自动轮播
    function AutoPlay()
    {
        if(index > SwiperItem.length - 1)
        {
            index = 0;
        }

        for(let i = 0;i < SwiperItem.length;i++)
        {
            SwiperItem[i].classList.remove('active');
            PaginationItem[i].classList.remove('active');

        }

        SwiperItem[index].classList.add('active');
        PaginationItem[index].classList.add('active');

        index++;
    }

    // 循环定时器
    T = setInterval(AutoPlay,1000);

    // 生成分页指示器的子元素
    for(let i = 0;i < SwiperItem.length;i++)
    {
        SwiperPagination.innerHTML += `<div class="item ${i == 0 ? 'active' : ''}" data-index="${i}"></div>`
    }
</script>